<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        @keyframes myani {
            0%{
                top: 30px;
            }
            100%{
                top: 0px;
            }

        }
        #uu {
            display: flex;
            list-style: none;
            width: 800px;
            margin: 100px auto;
            overflow: hidden;

        }
        #uu li {
            position: relative;
            background-color: black;
            height: 30px;
            width: 80px;
        }
        #uu li>span{
            padding: 0 10px;
            color: white;
            line-height: 30px;
            text-align: center;
            font-size: 24px;
            cursor: pointer;
            z-index: 333;
            position: absolute;

        }
        span:before{
            content: "";
            position: absolute;
            z-index: -1;
            top: 30px;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: yellow;
            transition: all .5s;
        }

        li:hover span:before{
            top:0;
        }

    </style>
</head>
<body>
    <div id="box">
        <ul id="uu">
            <li><span>导航1</span></li>
            <li><span>导航2</span></li>
            <li><span>导航3</span></li>
            <li><span>导航4</span></li>
            <li><span>导航5</span></li>
            <li><span>导航6</span></li>
            <li><span>导航7</span></li>
            <li><span>导航8</span></li>
            <li><span>导航9</span></li>
        </ul>
    </div>
</body>

</html>